<template>
<div class="Article" v-if="model">
  <div class="news">
    <i class="goback iconfont iconhuitui1" @click="back"></i>
    <h2 class="text">{{model.title}}</h2>
    <div class="tiem ">{{gettime | gettiem}}</div>
  </div>
  <div v-if="model.body">
    <div v-html="model.body" class=" body"></div>
  </div>
  <div v-else>
    <span class="notext">暂时还没有把所有数据录好，不好意思</span>
  </div>

  <div class="xiangguaan">
    <div class="title">
      <i class="iconfont iconlianjie"></i>
      <p>相关资讯</p>
    </div>
    <div class="text">
      <router-link
        class="py-1"
        tag="div"
        :to="`/articles/${item._id}`"
        v-for="item in model.related"
        :key="item._id"
      >{{item.title}}</router-link>
    </div>

  </div>

</div>

</template>

<script>
import dayjs from 'dayjs'
export default {
  props: {
    id: { required: true }
  },
  data () {
    return {
      model: null
    }
  },
  filters: {
    gettiem (v) {
      return dayjs(v).format('YYYY-MM-DD')
    }
  },
  watch: {
    id: 'fetch'
    // id(){
    //   this.fetch()
    // }
  },
  computed: {
    gettime () {
      return new Date().getTime()
    }
  },
  methods: {
    back () {
      this.$router.back()
    },
    async fetch () {
      const res = await this.$http.get(`articles/${this.id}`)
      this.model = res.data
    }
  },
  created () {
    this.fetch()
  }
}
</script>

<style lang="scss" scoped>
  @import "../assets/styles/global";
.Article{
  background-color: #f1f1f1;
  .news{
    width: 100%;
    height: .6667rem;
    border-bottom: 1px solid #d4d4d5;
    margin-bottom: 0.6667rem;
    display: flex;
    align-items: center;
    .goback{
      color: #4394e4;
      font-weight: bold;
    }
    .text{
      flex: 1;
      color: #4394e4;
      font-weight: bold;
      @include ellipsis
    }
    .tiem{
      color: #9fa0a0;
      font-size: 0.06667rem;
      margin-right: .2rem;
    }
  }
  .body{
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 1rem;
    width: 90%;
  }
  .notext{
    color: red;
    font-size: 1rem;
  }
  .xiangguaan{
    border-top: 4px solid #c0c4cc;
    padding-left: 8%;
    font-size: .1rem;
    font-weight: bold;
    .title{
      @include flex;
      margin-top: .2rem;
      margin-bottom: .3rem;
      font-size: .24rem;
      p{
        margin-left: .2rem;
        color: #4394e4;
      }

    }
    .text{
      .py-1{
        margin-top: .2rem;
        @include ellipsis
      }
    }
  }

}

</style>
